<template>
<div>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="5" class="edit-label">样式</a-col>
    <a-col :span="9">
      <a-input-number size="small" :min="0" v-model="editLayer.fontSize" @change="canvas.renderAll()"/>
      <div class="input-tip">字体大小</div>
    </a-col>
    <a-col :span="9" :offset="1">
      <a-input-number size="small" :min="0" v-model="editLayer.charSpacing" @change="canvas.renderAll()"/>
      <div class="input-tip">字符间距</div>
    </a-col>
  </a-row>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="5" class="edit-label">颜色</a-col>
    <a-col :span="9">
      <a-input  size="small" :value="editLayer.fill" @input="textColorChange">
        <div slot="addonAfter" style="width: 16px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span style="font-size: 12px">拾色器</span>
            </template>
            <input size="small" type="color" style="width: 15px;height: 20px;outline: none;border: none" :value="editLayer.fill" @input="textColorChange"/>
          </a-tooltip>
        </div>
      </a-input>
      <div class="input-tip">字体色</div>
    </a-col>
    <a-col :span="9" :offset="1">
      <a-input size="small" :value="editLayer.textBackgroundColor" @input="textBackgroundChange">
        <div slot="addonAfter" style="width: 16px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span style="font-size: 12px">拾色器</span>
            </template>
            <input :value="editLayer.textBackgroundColor" size="small" type="color" style="width: 15px;height: 20px;outline: none; border: none" @input="textBackgroundChange"/>
          </a-tooltip>
        </div>
      </a-input>
      <div class="input-tip">文字背景色</div>
    </a-col>
  </a-row>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="4" :offset="5">
      <a-button class="choose-style" :class="[editLayer.fontWeight === 'bold' ? 'active' : '']" @click="toggleCheckedBold">B</a-button>
    </a-col>
    <a-col :span="4" :offset="1">
      <a-button class="choose-style" :class="[editLayer.linethrough ? 'active' : '']" @click="toggleCheckedDel"><span class="del">A</span></a-button>
    </a-col>
  </a-row>
  <a-row :gutter="10" class="edit-group" >
    <a-col :span="5" class="edit-label">内容</a-col>
    <a-col :span="19">
      <a-textarea size="small" v-model="editLayer.text" placeholder="请输入文字内容" @change="canvas.renderAll()"/>
    </a-col>
  </a-row>
</div>
</template>


<script>
  import textDescription from './desc'
  import useCanvas from '../../hooks/useCanvas'

  export default {
    name: 'editor-text',
    setup () {
      const { canvas, editLayer } = useCanvas()
      return {
        canvas,
        editLayer
      }
    },
    data () {
      return {
        textDescription,
      }
    },
    methods: {
      toggleCheckedBold () {
        const fontWeight = this.editLayer.get('fontWeight') === 'bold' ? 'normal' : 'bold'
        this.editLayer.set('fontWeight', fontWeight)
        this.canvas.renderAll()
      },
      toggleCheckedDel () {
        this.editLayer.set('linethrough', !this.editLayer.get('linethrough'))
        this.canvas.renderAll()
      },
      textBackgroundChange (e) {
        this.editLayer.set('textBackgroundColor', e.target.value)
        this.canvas.renderAll()
      },
      textColorChange (e) {
        this.editLayer.set('fill', e.target.value)
        this.canvas.renderAll()
      } 
    }
  }

</script>

<style scoped lang="scss">
@import "../../style/editor.scss";
</style>
